<template>
	<view :class="ani?'center-container':'center-container center-container2'" v-show="isShow" catchtouchmove>
		<view class="centerPopup" @touchmove.prevent>
			<view class="title" :style="{fontSize:fontSize}">{{title}}</view>
			<view class="subTitle">{{subTitle?subTitle:''}}</view>
			<view class="xzwButton">
				<button class="cancelButton" @click="leftClick" :style="{border:'1upx solid'+useColor,color:useColor,backgroundColor:'#fff'}">{{leftText}}</button>
				<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="confirmButton" @click="rightClick" :style="{color:'#fff',backgroundColor:useColor}">{{rightText}}</button>
			</view>
		</view>
		<view class="mask" v-show="isShow" @touchmove.prevent></view>
	</view>
</template>

<script>
	import { GetUseInfo,UpdateUser} from '../../utils/api.js'
	import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js";
	export default {
		props: {
			//标题
			title: '',
			// 小标题
			subTitle: '',
			// 左侧文字
			leftText: {
				type: String,
				default: '取消'
			},
			// 右侧文字
			rightText: {
				type: String,
				default: '确定'
			},
			//弹窗颜色
			color: {
				type: String,
				default: ''
			},
			//左侧按钮是否默认点击
			default: {
				type: Boolean,
				default: true
			},
			//字体大小
			fontSize: {
				type: String,
				default: '32upx'
			}
		},
		data() {
			return {
				isShow: false,
				ani: false,
				useColor:'#f00'
			}
		},
		methods: {
			leftClick() {
				if (this.default) {
					this.close()
				} else {
					this.$emit("leftClick")
				}
			},
			open() {
				this.$nextTick(function(){
					this.ani = true
					this.isShow = true
					if(this.color){
						this.useColor=this.color
					}else{
						this.useColor='#f00'
					}
					console.log(this.useColor)
				})

			},
			close() {
				this.ani = false
				// #ifndef MP-WEIXIN
				setTimeout(() => {
					this.isShow = false
				}, 180)
				// #endif
				// #ifdef MP-WEIXIN
				this.isShow = false
				// #endif
				this.$emit('confirmClick')
			},
			rightClick() {
				
			},
			onGetPhoneNumber(e){
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  
					//拒绝授权后弹出一些提示  
					this.close()
				}else{      //允许授权  
					let pc = new WXBizDataCrypt('wx5a4e1142951d4004',uni.getStorageSync('session_key'));  //wxXXXXXXX为你的小程序APPID  
					let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);  
					let mobile = data.phoneNumber
					UpdateUser({mobile})
					this.ani = false
					this.isShow = false
					this.close()
				}  
			},
		}
	}
</script>

<style lang="scss">
	@keyframes in {
		0% {
			opacity: 0;
			transform: scale(1.1, 1.1);
		}

		100% {
			opacity: 1;
			transform: scale(1, 1);
		}
	}

	@keyframes out {
		0% {
			opacity: 1;
			transform: scale(1, 1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2, 1.2);
		}
	}

	.center-container {
		z-index: 1000;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		animation: in 0.2s ease-in;

		.centerPopup {
			z-index: 1000;
			width: 586upx;
			background-color: #fff;
			border-radius: 20upx;
			position: absolute;
			left: 50%;
			top: 48%;
			transform: translate(-50%, -50%);

			.title {
				font-weight: bold;
				text-align: center;
				font-size: 32upx;
				padding: 74upx 20upx 20upx;
			}

			.subTitle {
				text-align: center;
				font-size: 24upx;
				padding: 0 20upx 20upx 20upx;
			}

			.xzwButton {
				display: flex;
				justify-content: space-between;
				padding: 20upx 70upx 54upx;
				button {
					width: 216upx;
					height: 60upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 44upx;
					font-size: 28upx;
					box-sizing: border-box;
				}
			}
		}

		.mask {
			z-index: 100;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: #000;
			opacity: 0.4;
		}
	}

	.center-container2 {
		animation: out 0.2s ease-in;
	}
</style>
